﻿@model IndexModel


<button id="alertsButton" class="btn btn-info">
    <span class="fa fa-bell"></span>
    <span id="alertsCount">
        @Model.Alerts.Count
    </span>
</button>

<div id="alertsFrame" class="bg-secondary">
    <div class="text-right">
        <button id="closeAlertsFrameButton" class="btn btn-secondary mt-2 mr-2 btn-sm">
            <span class="fa fa-times pointer"></span>
        </button>

    </div>

    <div class="mt-3">
        @foreach (var alert in Model.Alerts)
        {
            <div id="@alert.ID" class="card border-primary mb-3 mr-2 ml-2">
                <div class="card-header">@alert.CreatedOn.ToString()</div>
                <div class="card-body">
                    @if (!string.IsNullOrWhiteSpace(alert.Device?.DeviceName))
                    {
                        <h6 class="card-title">@alert.Device.DeviceName</h6>
                    }
                    <p class="card-text">@alert.Message</p>
                    <div class="text-right">
                        <button alert="@alert.ID" class="btn btn-sm btn-secondary alert-dismiss-button"
                                type="button">
                            Dismiss
                        </button>
                    </div>
                </div>
            </div>
        }
    </div>

</div>

<div class="work-area hidden">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active show" href="#deviceGridFrame" data-toggle="tab">
                Grid
            </a>
        </li>

        <li class="nav-item">
            <a id="consoleTab" class="nav-link" href="#consoleFrame" data-toggle="tab">
                Console
                <span id="consoleAlert" class="badge badge-info badge-pill align-top" hidden>
                    <i class="fa fa-exclamation" aria-hidden="true"></i>
                </span>
            </a>
        </li>

    </ul>
    <div id="tabContentWrapper">
        <div class="tab-content h-100">
            <partial name="_DataGrid" model="Model" />
            <partial name="_ConsoleFrame" model="Model" />
        </div>
    </div>
</div>


<div id="toastsWrapper">

</div>



<script>
    require.config({
        waitSeconds: 30,
        paths: {
            "App": "out"
        }
    });
    require(["App"], function (remotely) {
        remotely.App.Main.Init();
    });
</script>